<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
        body{
        margin:0;
       }
       header{
        height:700px;
        background-image: url(bg.jpg);
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;

       }
       button{
        position: relative;
        top: 100px;
        width:200px;
        height:60px;
        background-color: transparent;
        color: #fff;
        font-size: 24px;
        border:1px solid #fff;
        outline:none;
        border-radius: 10px;
        cursor:pointer;
       }
       button:hover{
        background-color: #fff;
        color: #45b2eb;
        boder:1px solid #45b2eb;
       }
       div{
        height:300px;
        display: flex;
        align-items: center;
        justify-content: center;
       }
       span{
        font-size: 64px;
        color: #e96d4f;
       }
       article{
        height:600px;
        background-image: url(1.jpg);
        background-attachment: fixed;
       }
       main{
         height:580px;
         position:relative;
       }
       main>img{
        position: absolute;
        bottom:0;
        left:180px;
       }
       a:hover{
        background-color: #fff;
        color: #45b2eb;
        boder:1px solid #45b2eb;
        text-decoration: none;
       }
       aside{
        width:500px;
        position:absolute;
        top:100px;
        right:200px;
        text-align: right;
       }
     aside>h1{
     font-size: 50px;
     color:red;
      }
      aside>p{
        font-size: 20px;
        color:#555;
      }
      div>a{
        text-decoration: none;
      }
      p>a{
        text-decoration: none;
        color:yellow;
      }
      map{
        display:block;
        width:100%;
        height:600px;
      }
    </style>
</head>
<body>
   <header>
       <p><img src="5.png" alt=""></p>
       <button>四季钰你安暖</button>
   </header>
   <div>
      <span>一·辈·子·的·事</span>
   </div>
   <article></article>
   <main>
       <img src="4.png" alt="">
       <aside>
           <h1>闺蜜，永远陪在你身边</h1>
           <p>无论在什么时候，都会给予你想要的帮助，陪你共度难关</p>
            <p><a href="https://user.qzone.qq.com/1411304137?ptlang=2052&source=aiostar" >老雷</a></p>
            <p><a href="https://user.qzone.qq.com/2311167131?ptlang=2052&source=aiostar" >大鬼</a></p>
            <p><a href="https://user.qzone.qq.com/2456502724?ptlang=2052&source=aiostar">格格</a></p>
       </aside>
   </main>
   <div>
      <a href="https://user.qzone.qq.com/2504690221/infocenter"><h1>·想和你一起慢慢变老·</h1></a>
   </div>
   <map id="here"></map>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true">
</script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point, 19);
    window.map = map;
}
initMap();
</script>
</html>


